<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
  <th:block th:insert="~{include :: header('Job list')}" />
  <th:block th:insert="~{include :: select2-css}" />
</head>
<body class="gray-bg">

  <div class="container-div">
    <div class="row">
      <div class="col-sm-12 search-collapse">
        <form id="form-job-list">
          <div class="select-list">
            <ul>
              <li>
                <label>选择分组：</label>
                <select class="form-control" name="groups" th:with="item=${groups}">
                  <option value="" selected>　</option>
                  <option th:each="e : ${item}" th:text="${e}" th:value="${e}"></option>
                </select>
              </li>
              <li>
                <label>Job名称：</label>
                <input type="text" name="jobName" />
              </li>
              <li>
                <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                <a class="btn btn-warning btn-rounded btn-sm" onclick="resetForm()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
              </li>
            </ul>
          </div>
        </form>
      </div>

      <div class="btn-group-sm" id="toolbar" role="group">
        <a class="btn btn-success" onclick="$.operate.add()" shiro:hasPermission="disjob:job:operate">
          <i class="fa fa-plus"></i> 添加
        </a>
        <a class="btn btn-danger multiple disabled" onclick="removeAll()" shiro:hasPermission="disjob:job:operate">
          <i class="fa fa-trash"></i> 删除
        </a>
        <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="disjob:job:operate">
          <i class="fa fa-download"></i> 导出
        </a>
      </div>

      <div class="col-sm-12 select-table table-striped">
        <table id="bootstrap-table"></table>
      </div>
    </div>
  </div>

  <th:block th:insert="~{include :: footer}" />
  <th:block th:insert="~{include :: bootstrap-table-fixed-columns-js}" />
  <th:block th:insert="~{include :: select2-js}" />

  <script th:inline="javascript">
    const operateFlag = [[${@permission.hasPermi('disjob:job:operate')}]];
    const prefix = ctx + "disjob/job";

    const jobTypes           = [[${@disjobService.enums('JobType')}]];
    const triggerTypes       = [[${@disjobService.enums('TriggerType')}]];
    const routeStrategies    = [[${@disjobService.enums('RouteStrategy')}]];
    const shutdownStrategies = [[${@disjobService.enums('ShutdownStrategy')}]];

    $(function () {
      const options = {
        url: prefix + "/list",
        createUrl: prefix + "/add",
        removeUrl: prefix + "/remove",
        exportUrl: prefix + "/export",
        fixedColumns: true,
        fixedNumber: 2,
        modalName: "作业配置",
        columns: [{
          checkbox: true
        },
        {
          field: 'jobId',
          title: 'JobId',
          formatter: function (value, row, index) {
            return '<a href="javascript:void(0)" onclick="detail(\'' + value + '\')">' + value + '</a>';
          }
        },
        {
          field: 'group',
          title: '分组名称',
          cellStyle: function (value, row, index) {
            return { css: { "white-space": "nowrap" } }
          }
        },
        {
          field: 'jobName',
          title: 'Job名称',
          cellStyle: function (value, row, index) {
            return { css: { "min-width": "50px", "white-space": "nowrap", "text-overflow": "ellipsis", "overflow": "hidden", "max-width": "200px" } }
          }
        },
        {
          field: 'jobState',
          title: 'Job状态',
          formatter: function (value, row, index) {
            if ([[${@permission.isPermitted('disjob:job:operate')}]]) {
              const str = (row.jobState === 0) ? 'off' : 'on';
              return '<i style="cursor:pointer;" class="fa fa-toggle-' + str + ' text-info fa-2x" onclick="changeState(\'' + row.jobId + '\', ' + value + ')"></i> ';
            } else {
              return (row.jobState === 0) ? "<span class='badge badge-danger'>禁用</span>" : "<span class='badge badge-success'>启用</span>";
            }
          }
        },
        {
          field: 'jobType',
          title: 'Job类型',
          formatter: function (value, row, index) {
            return $.table.selectData(jobTypes, value, 'value', 'desc');
          }
        },
        {
          field: 'triggerType',
          title: '触发器类型',
          formatter: function (value, row, index) {
            return $.table.selectData(triggerTypes, value, 'value', 'desc');
          }
        },
        {
          field: 'triggerValue',
          title: '触发器值',
          cellStyle: function (value, row, index) {
            return { css: { "min-width": "50px", "white-space": "nowrap", "text-overflow": "ellipsis", "overflow": "hidden", "max-width": "200px" } }
          }
        },
        {
          field: 'routeStrategy',
          title: '路由策略',
          formatter: function (value, row, index) {
            return $.table.selectData(routeStrategies, value, 'value', 'desc');
          }
        },
        {
          field: 'shutdownStrategy',
          title: 'Worker关机的执行策略',
          formatter: function (value, row, index) {
            return $.table.selectData(shutdownStrategies, value, 'value', 'desc');
          }
        },
        {
          field: 'lastTriggerTime',
          title: '上一次触发时间',
          formatter: function (value, row, index) {
            return $.common.dateFormat(parseInt(value), 'yyyy-MM-dd HH:mm:ss');
          },
          cellStyle: function (value, row, index) {
            return { css: { "white-space": "nowrap" } }
          }
        },
        {
          field: 'nextTriggerTime',
          title: '下一次触发时间',
          formatter: function (value, row, index) {
            if (value === "9223372036854775807" || value === 9223372036854775807) {
              return "-"
            }
            return $.common.dateFormat(parseInt(value), 'yyyy-MM-dd HH:mm:ss');
          },
          cellStyle: function (value, row, index) {
            return { css: { "white-space": "nowrap" } }
          }
        },
        {
          field: 'updatedBy',
          title: '更新人',
          visible: false
        },
        {
          field: 'updatedAt',
          title: '更新时间',
          visible: false,
          cellStyle: function (value, row, index) {
            return { css: { "white-space": "nowrap" } }
          }
        },
        {
          field: 'createdBy',
          title: '创建人'
        },
        {
          field: 'createdAt',
          title: '创建时间',
          cellStyle: function (value, row, index) {
            return { css: { "white-space": "nowrap" } }
          }
        },
        {
          title: '操作',
          align: 'center',
          formatter: function (value, row, index) {
            if (![[${@permission.isPermitted('disjob:job:operate')}]]) {
              return '';
            }
            const actions = [];
            if (row.jobState === 0) {
              actions.push("<a class='btn btn-danger btn-rounded btn-xs " + operateFlag + "' href='javascript:void(0)' onclick='$.operate.remove(&quot;" + row.jobId + "&quot;)'><i class='fa fa-trash'></i> 删除</a> ");
            }
            actions.push("<a class='btn btn-primary btn-rounded btn-xs " + operateFlag + "' href='javascript:void(0)' onclick='trigger(&quot;" + row.jobId + "&quot;)'><i class='fa fa-hand-pointer-o'></i> 触发</a> ");
            actions.push("<a class='btn btn-success btn-rounded btn-xs " + operateFlag + "' href='javascript:void(0)' onclick='edit(&quot;" + row.jobId + "&quot;)'><i class='fa fa-edit'></i> 编辑</a> ");
            actions.push("<a class='btn btn-warning btn-rounded btn-xs " + operateFlag + "' href='javascript:void(0)' onclick='copy(&quot;" + row.jobId + "&quot;)'><i class='fa fa-copy'></i> 复制</a> ");
            return '<a tabindex="0" class="btn btn-info btn-rounded btn-xs" role="button" data-container="body" data-placement="left" data-toggle="popover" data-html="true" data-trigger="hover" data-content="' + actions.join('') + '"><i class="fa fa-chevron-circle-right"></i> 操作</a>';
          }
        }]
      };
      $.table.init(options);
    });

    function resetForm() {
      $.form.reset();
      const elem = $("select[name='groups']");
      elem.val(elem.val()).trigger("change");
    }

    function detail(jobId) {
      const url = prefix + '/detail/' + jobId;
      $.modal.open("作业配置详情", url, null, null, null, ['关闭']);
    }

    function changeState(jobId, fromJobState) {
      const toJobState = (fromJobState === 0) ? 1 : 0;
      $.modal.confirm("确认要" + (toJobState === 0 ? "禁用" : "启用") + "吗？", function () {
        $.operate.post(prefix + "/state/change", {"jobId": jobId, "toState": toJobState});
      });
    }

    function trigger(jobId) {
      $.modal.confirm("确认要触发执行吗？", function () {
        $.operate.post(prefix + "/trigger", {"jobId": jobId});
      });
    }

    function copy(jobId) {
      $.modal.open("复制", prefix + '/copy/' + jobId);
    }

    function edit(jobId) {
      $.modal.open("修改" + table.options.modalName, prefix + "/edit/" + jobId);
    }

    // 批量删除
    function removeAll() {
      const rows = $("#" + table.options.id).bootstrapTable('getSelections');
      if (rows.length === 0) {
        $.modal.alertWarning("请至少选择一条记录");
        return;
      }
      for (let i = 0, n = rows.length; i < n; i++) {
        if (rows[i].jobState === 1) {
          $.modal.alertWarning("不能删除启用状态的作业配置[" + rows[i].jobId + "]");
          return;
        }
      }

      $.modal.confirm("确认要删除选中的" + rows.length + "条数据吗?", function () {
        const ids = $.map(rows, function (row) {
          return row.jobId;
        });
        $.operate.post(table.options.removeUrl, {"ids": ids.join()});
      });
    }
  </script>

</body>
</html>
